<template>
  <div class="footer-wrapper">
    <div class="footer-content">
      <div class="footer-top">
        <div>
          <div class="title">新手上路</div>
          <div class="theme">常见问题</div>
          <div class="theme">签章手册</div>
        </div>
        <div>
          <div class="title">交易指南</div>
          <div class="theme">常见问题</div>
          <div class="theme">签章手册</div>
        </div>
        <div>
          <div class="title">平台规则</div>
          <div class="theme">常见问题</div>
          <div class="theme">签章手册</div>
          <div class="theme">签章手册</div>
        </div>
        <div>
          <div class="title">平台工具</div>
          <div class="theme">签章手册</div>
          <div class="theme">签章手册</div>
        </div>
        <div>
          <div class="title">平台工具</div>
          <div class="tel">023-47678000</div>
          <div class="theme">客服时间：工作日 8：30-17：30</div>
        </div>
        <div>
          <div class="weixin"></div>
          <div class="tips">官方微信</div>
        </div>
      </div>
      <div class="content-line"></div>
      <div class="content-bottom">
        <div class="bottom-row">
          <div>关于我们</div>
          <div>联系我们</div>
          <div>隐私声明</div>
          <div>法律声明</div>
        </div>
        <div class="bottom-num">渝ICP备2021005260号-1 渝公网安备 50011602500624号</div>
        <div>Copyright © 2021 xibushigu. All Rights Reserved. 西部食谷 版权所有</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      aboutUsList: [
        {
          logo: '专',
          title: '专注甄选',
          tips: '一句文案，一句文案'
        },
        {
          logo: '选',
          title: '选择丰富',
          tips: '一句文案，一句文案'
        },
        {
          logo: '诚',
          title: '诚信认证',
          tips: '一句文案，一句文案'
        },
        {
          logo: '服',
          title: '服务保障',
          tips: '一句文案，一句文案'
        },
      ]
    }
  }
}
</script>

<style scoped lang='scss'>
@import "@/style/color.scss";
.footer-wrapper {
  width: 100%;
  background-color: #333333;
}
.footer-content {
  width: $bigWidth;
  padding: 40px 0 60px;
  margin: 0 auto;
  color: #fff;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  height: 130px;
  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .theme {
    font-size: 12px;
    margin-top: 12px;
  }
  .tel {
    font-size: 26px;
    font-weight: bold;
  }
  .weixin {
    width: 90px;
    height: 90px;
    background-color: #f5f5f5;
  }
  .tips {
    margin-top: 20px;
    text-align: center;
  }
}
.content-line {
  height: 1px;
  background: #444444;
  margin: 50px 0 30px;
}
.content-bottom {
  text-align: center;
  .bottom-row {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    div {
      padding: 0 20px;
      border-right: 1px solid #fff;
    }
    div:last-child {
      border-right: 0;
    }
  }
  .bottom-num {
    margin-bottom: 15px;
  }
}
</style>
